<template>
  <div class="TForm">
    <el-form
      ref="form"
      :model="innerValue"
      size="small"
      :label-position="labelPosition"
      :label-width="labelWidth"
      label-suffix="："
      :inline="true"
      @submit.native.prevent
    >
      <template v-for="column in columns">
        <el-form-item :key="column.prop" :prop="column.prop" :label="column.label">
          <slot v-if="column.type == 'slot'" :name="column.slotName"></slot>
          <template v-if="column.type == 'input'">
            <el-input
              v-model="innerValue[column.prop]"
              :class="column && column.className ? column.className : 'common-query-form-item-width-sm'"
              clearable
              :placeholder="column.placeholder"
              @change="getSearchList"
            />
          </template>
          <template v-if="column.type == 'number'">
            <el-input
              v-model="innerValue[column.prop]"
              :class="column && column.className ? column.className : 'common-query-form-item-width-sm'"
              :type="column.type"
              clearable
              :placeholder="column.placeholder"
              @change="getSearchList"
            />
          </template>
          <template v-if="column.type == 'select'">
            <el-select
              v-model="innerValue[column.prop]"
              class="common-query-form-item-width-sm"
              clearable
              :placeholder="column.placeholder"
              @change="getSearchList"
            >
              <el-option
                v-for="item in $store.state.data.OPTION_MAP[column.key] || column.data"
                :key="column.useKey ? item.label : item.value"
                :label="item.label"
                :value="column.useKey ? item.label : item.value"
              >
              </el-option>
            </el-select>
          </template>
          <template v-if="column.type == 'TRangePicker'">
            <TRangePicker
              v-model="innerValue[column.prop]"
              class="w-[376px]"
              :placeholder="column.placeholder"
              :format="column.format"
              :valueFormat="column.valueFormat"
              @ok="getSearchList"
              @change="Array.isArray(innerValue[column.prop]) && innerValue[column.prop].length == 0 && getSearchList()"
            />
          </template>
          <template v-if="column.type == 'TMonthPicker'">
            <TMonthPicker
              v-model="innerValue[column.prop]"
              :placeholder="column.placeholder"
              :valueFormat="column.valueFormat"
              :format="column.format"
              @changeVal="getSearchList()"
            />
          </template>
          <template v-if="column.type == 'TCascader'">
            <TCascader
              v-model="innerValue[column.prop]"
              :options="column.options || column.data"
              :placeholder="column.placeholder"
              :otherProps="column.otherProps"
              :clearable="column.clearable"
              :multiple="column.multiple"
              @changeVal="getSearchList()"
            />
          </template>
        </el-form-item>
      </template>
      <el-form-item class="!mb-0">
        <t-button type="primary" class="common-search-btn" @click="getSearchList">查 询</t-button>
        <t-button class="common-search-btn" type="default" plain @click="reset">重 置</t-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import vModelMixin from "@/mixin/v-model";

export default {
  name: "TForm",
  mixins: [vModelMixin],
  props: {
    columns: {
      type: Array,
      require: true,
      default: () => [],
    },
    form: {
      type: Object,
      require: true,
      default: () => {},
    },
    span: {
      type: Number,
      require: false,
      default: 6,
    },
    labelWidth: {
      type: String,
      require: false,
      default: "0",
    },
    labelPosition: {
      type: String,
      require: false,
      default: "left",
    },
  },
  data() {
    return {
      // form: {},
    };
  },
  mounted() {
    // this.currentForm = JSON.parse(JSON.stringify(this.form));
  },
  methods: {
    getSearchList() {
      this.$emit("onSearchList", this.form);
    },
    reset() {
      this.$refs["form"].resetFields();
      this.$emit("onSearchList", {});
    },
  },
};
</script>

<style lang="scss" scoped>
.TForm {
  .el-form--inline .el-form-item {
    margin-right: 32px;
  }

  :deep(.el-select) {
    width: 100%;
  }

  :deep(.ant-input) {
    border: 1px solid #bac3d3;
    border-radius: 4px;
  }
}
</style>
